<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/attrs">$attrs</router-link> |
      <router-link to="/axios">Axios</router-link> |
      <router-link to="/flex">Flex</router-link> |
      <router-link to="/flex2">Flex2</router-link> |
      <router-link to="/flex3">Flex3</router-link> |
      <router-link to="/grid">Grid</router-link> |
      <router-link to="/svg">Svg</router-link> |
      <router-link to="/css">Css</router-link> |
      <router-link to="/cssmodule">CssModule</router-link> |
      <router-link to="/datepicker">DatePicker</router-link> |
      <router-link to="/echarts">Echarts</router-link> |
      <router-link to="/echarts2">Echarts2</router-link> |
      <router-link to="/echarts3">Echarts3</router-link> |
      <router-link to="/component">Component</router-link> |
      <router-link to="/monaco">Monaco</router-link> |
      <router-link to="/mutationObserver">MutationObserver*</router-link> |
      <router-link to="/resize">Resize</router-link> |
      <router-link to="/menu">Menu</router-link> |
      <router-link to="/mixins">Mixins</router-link> |
      <router-link to="/clipboard">Clipboard</router-link> |
      <router-link to="/html2canvas">html2canvas</router-link> |
      <router-link to="/input">input</router-link> |
      <router-link to="/inputmask">Inputmask</router-link> |
      <router-link to="/runtime">runtime</router-link> |
      <router-link to="/elementui">elementui</router-link> |
      <router-link to="/lowcode">lowcode</router-link> |
      <router-link to="/lowcode2">lowcode2</router-link> |
      <router-link to="/lowcode3">lowcode3</router-link> |
      <router-link to="/luckysheet">luckysheet</router-link> |
      <router-link to="/markdown-it">markdown-it</router-link> |
      <router-link to="/markdown-it-container">markdownContainer</router-link> |
      <router-link to="/optiontable">option-table</router-link> |
      <router-link to="/position">position</router-link> |
      <router-link to="/scopedSlots">scopedSlots</router-link> |
      <router-link to="/select">select</router-link> |
      <router-link to="/slot">slot</router-link> |
      <router-link to="/table">Table</router-link> |
      <router-link to="/tinymce">Tinymce</router-link> |
      <router-link to="/uploadimage">UploadImage</router-link> |
      <router-link to="/uploadbigfile">Uploadbigfile</router-link> |
      <router-link to="/user">user</router-link> |
      <router-link to="/watchprops">watchprops</router-link> |
      <router-link to="/worker">Worker</router-link> |
      <router-link to="/zrender">zrender</router-link> |
    </div>
    <transition name="slide-right">
      <router-view></router-view>
    </transition>
  </div>
</template>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
  color: #2c3e50;
}

#nav {
  padding: 20px auto 10px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
